import { Modal, Form, Button, Input, Select } from 'antd'
import React from 'react'

const FormItem = Form.Item

const doCancel = ({
                    visible,
                    showCancel,
                    confirmCancel,
                    form: {
                      getFieldDecorator,
                      validateFieldsAndScroll,
                      getFieldValue,
                      setFieldsValue
                    }
                  }) => {
  const handleCancel = () => {
    showCancel(false)
  }
  const handleOk = (e) => {
    e.preventDefault()
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        Modal.confirm({
          title: '确定吗',
          content: '你确定要取消该合同吗？',
          onOk () {
            confirmCancel(values.num)
          },
          onCancel () {

          }
        })
      }
    })
  }

  return (
    <Form>
      <Modal
        visible={visible}
        title="合同取消"
        onOk={handleOk}
        onCancel={handleCancel}
        width={300}
        destroyOnClose={true}
        footer={[
          <Button key="back" onClick={handleCancel}>取消</Button>,
          <Button key="submit" type="primary" htmlType="submit" onClick={handleOk}>
            确认
          </Button>,
        ]}>
        <FormItem
          label="合同单号"
          labelCol={{span: 7}}
          wrapperCol={{span: 15}}
        >
          {getFieldDecorator('num', {
            rules: [
              {required: true, message: '请输入合同单号以确认'},
              {whitespace: true}
            ],
            initialValue: '',
            validateTrigger: 'onSubmit'
          })(
            <Input/>
          )}
        </FormItem>
      </Modal>
    </Form>
  )
}
export default Form.create()(doCancel)
